<template>
	<div>
		<!-- 步骤条 -->
		<el-steps :active="active" align-center finish-status="success">
			<el-step class="el-step" title="绑定邮箱地址"></el-step>
			<el-step title="输入验证码"></el-step>
			<el-step title="成功"></el-step>
		</el-steps>
		<!-- 邮箱表单 -->
		<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
			<el-form-item label="邮箱地址" prop="email" class="item_i">
				<el-input type="text" v-model="ruleForm.email" autocomplete="off"></el-input>
				<!-- 获取邮箱验证码 -->
				<el-button style="margin-top: 12px margin-left:10px;" @click="next" v-show="count">获取邮箱验证码</el-button>
				<el-button style="margin-top: 12px margin-left:10px;" @click="next" v-show="!count" disabled>{{ num
				}}</el-button>
			</el-form-item>
			<el-form-item label="验证码" prop="code" class="item_i">
				<el-input type="text" v-model="ruleForm.code" autocomplete="off"></el-input>
				<!-- 提交验证码 -->
				<el-button style="margin-top: 12px margin-left:10px;" @click="next_one" v-show="count">提交邮箱验证码</el-button>
				<el-button style="margin-top: 12px margin-left:10px;" @click="next_one" v-show="!count" disabled>{{ num }}</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="success" style="margin-left: 180px;" @click="openRule">完成</el-button>
				<el-button style="margin-left: 20px;" @click="clearFule">重置</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>
<script>
// 引入绑定邮箱接口
import { bindemail, vefity, userProfile } from '@/api/User'

export default {
	name: 'SetEmail',
	data() {
		var checkEmail = (rule, value, callback) => {
			let reg =
				/^[a-zA-Z0-9]+([-_.][A-Za-zd]+)*@([a-zA-Z0-9]+[-.])+[A-Za-zd]{2,5}$/
			if (value === '') {
				callback(new Error('请输入邮箱'))
			} else if (reg.test(value)) {
				callback()
			} else {
				callback(new Error('请输入合法的邮箱'))
			}
		}
		var checkCode = (rule, value, callback) => {
			if (value == '') {
				callback(new Error('请输入验证码'))
			} else {
				callback()
			}
		}
		return {
			active: 0,
			count: true, //控制倒计时
			num: 30, //倒计时时间
			ruleForm: {
				email: '',
				code: '',
				text: ''
			},
			rules: {
				email: [{ validator: checkEmail, trigger: 'blur' }],
				code: [{ validator: checkCode, trigger: 'blur' }]
			}
		}
	},
	methods: {
		// 获取验证码事件
		next() {
			if (this.ruleForm.email != '') {
				this.active = 1
				// 获取邮箱验证码接口
				bindemail(this.$store.state.token, this.ruleForm.email).then((res) => {
					if (res.data.status == 'success') {
						this.$message({
							message: res.data.msg,
							type: 'success'
						});
						// 倒计时功能
						this.count = false
						if (this.count == false) {
							let timer = setInterval(() => {
								this.num--;
								if (this.num <= 0) {
									this.count = true
									clearInterval(timer)
								}
							}, 1000)
						}
					} else {
						this.$message.error(res.data.msg);
					}
				})
			}
		},
		// 提交验证码事件
		next_one() {
			if (this.ruleForm.code != '') {
				this.active = 2

				// 获取验证码是否正确接口
				vefity(this.$store.state.token, this.ruleForm.code).then(res => {
					if (res.data.status == 'error') {
						this.$message.error(res.data.msg);
					} else {
						this.$message({
							message: res.data.msg,
							type: 'success'
						});
						this.text = '成功'
						this.$store.commit('saveEmail', this.ruleForm.email)
						userProfile(this.$store.state.token)
					}
				})
			}
		},
		// 完成按钮
		openRule() {
			if (this.text == '成功') {
				this.active = 3
			}
		},
		// 重置按钮
		clearFule() {
			this.active = 0
			this.ruleForm.email = ''
			this.ruleForm.code = ''
		}
	}
}
</script>

<style>
.el-step__title.is-process {
	font-size: 15px;
}

.el-step__title.is-wait {
	font-size: 15px;
}

.demo-ruleForm {
	margin-top: 50px;
}

.item_i>.el-form-item__content>.el-button {
	margin-left: 10px;
}
</style>